<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-text='refreshSuccessText' :success-duration="1300">
        
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :error.sync="error"
            error-text='请求失败，重新加载'
            @load="addonload"
        >
            <!-- <van-cell v-for="item in list" :key="item" :title="item.title" /> -->
            <ListItem v-for="(item,index) in list" :key="index" :articleData="item"></ListItem>
        </van-list>
       
    </van-pull-refresh>
</template>


<script>
import {getArticles} from '@/api/article'
import ListItem from './ListItem'
export default {
    name:'List',
    components: {
       ListItem,
       
    },
    props: {
        channels:{
            type:Object,
            reauire:true
        }
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            timestamp:null,
            error:false,
            refreshing: false,
            refreshSuccessText:'',

        };
    },
    watch: {},
    computed: {},
    methods: {
       
        // addonload() {
        //     // 异步更新数据
        //     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        //     console.log('xin')
        //     setTimeout(() => {
        //         for (let i = 0; i < 10; i++) {
        //         this.list.push(this.list.length + 1);
        //         }

        //         // 加载状态结束
        //         this.loading = false;

        //         // 数据全部加载完成
        //         if (this.list.length >= 40) {
        //         this.finished = true;
        //         }
        //     }, 1000);
        //     },
        // },
        async addonload() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            console.log(this.channels)
            let that=this;
            try{
                // if(this.refreshing){
                //     this.list = [];
                //     this.refreshing = false;
                // }
                const {data}=await getArticles({
                    channel_id:that.channels.id,//频道id
                    timestamp:that.timestamp || Date.now(),//当前时间戳
                    with_top:1
                })
               
                var {results}=data.data
                that.list.push(...results)
                // 加在完成后将加载状态设为结束
                that.loading=false;
                //判断数据是否加载完成
                if(results.length>0&&results.length<30){
                   that.timestamp=data.data.pre_timestamp
                }else{
                   that.finished=true
                }
                
            }catch(err){
                console.log(err)
                this.loading=false
                this.error=true
            }
        },
        async onRefresh() {
            try{
                const {data}=await getArticles({
                    channel_id:this.channels.id,//频道id
                    timestamp:Date.now(),//当前时间戳
                    with_top:1
                })
                const {results}=data.data
                //将数据放到列表顶部
                this.list.unshift(...results)
                //关闭loading
                this.refreshing = false;
                // 提示文本
                this.refreshSuccessText=`刷新成功，更新了${results.length}条数据~`
            }catch(err){
                console.log("刷新失败，重新获取",err)
                //关闭loading
                this.refreshing = false;
                // 提示文本
                this.refreshSuccessText='刷新失败'
               
            }
        },
    },
    
    created() {
        this.addonload()
    },
    mounted() {

    }

};
</script>
<style lang="less" scoped>
</style>